<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title2</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root">

</div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- 属性的作用是传递数据:如何传？如何接收？
        // class App extends React.Component{
        //     // constructor(props) {
        //     //     super(props);
        //     //     console.log(props);
        //     //     console.log(this.props);
        //     //     console.log(this.props === props);// true
        //     // }
        //     render(){
        //         return (
        //             <div>
        //                 <p>userName:{this.props.userName}</p>
        //                 <p>age:{this.props.age}</p>
        //             </div>
        //         )
        //     }
        // }
        // root.render((
        //     // 向组件App传递两个属性：userName与age,值分别为zhangsan 12
        //     <App userName={"zhangsan"} age={12}/>
        // ))
    }
    {
        // 父子也可以通过属性进行数据的传递
        // 子组件接收到的属性是只读的（不允许修改）
        class App extends React.Component{
            info = {
                userName:"zhangsan",
                age:12
            }
            render(){
                return (
                    <div>
                        <h3>App</h3>
                        <Child userName={this.info.userName} age={this.info.age}></Child>
                        {/*以下程序是上方程序的语法糖*/}
                        {/*<Child {...this.info}></Child>*/}
                    </div>
                )
            }
        }
        class Child extends React.Component{
            // React当中事件与原生事件的异同：
            //  1- 原生事件的属性名需要全部小写，而React当中需要驼峰命名法
            //  2-  原生事件的属性值是字符串，而React是函数
            run(){
                // console.log(this.props.userName);
                this.props.userName = "lisi";// 不允许修改
            }
            render(){
                return (
                    <div>
                        <button onClick={()=>{
                            console.log(this.props.age);// undefined
                        }}>{this.props.age}</button>
                        <button onClick={this.run.bind(this)}>{this.props.userName}</button>
                    </div>
                )
            }
        }
        root.render(<App a={1} b={2}/>)
    }
</script>
</html>